<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>	
		b ody{
			width: 100%;
			height: 1000000px;
			background-image: url(img/小新.png);
			background-size: contain;
			/* 函数  cover     等比例放大图片    特点：原图按照比例方法存进背景空间
			        【开发者：背景图大小是否等于背景空间】
			        contain   等比例缩小图片    特点：图片按照比例缩放存背景空间
					【开发者：背景图等比例显示背景空间】
			 */
			/* 背景附件--尺寸中存在于cover或contain */
			background-attachment: fixed;  /*fixed 固定 */     /*scroll  不固定 */
		}
		div{
			width: 300px;
			height: 300px;
			background-color:aquamarine;
			background-image: url(img/小新.png);
			/* 问题：超大图-不显示   小图-显示
			   注意：背景空间大小，如果图小于背景空间--平铺
			   */
			  background-repeat: no-repeat;
			  /* no-repeat 不平铺   repeat-x,y 横，纵向平铺 */
			  background-size: 30%;
			  /* 背景尺寸属性值：数值px %  |函数 cover contain */
			  /* 背景定位：背景空间大于背景图   关键字：center、left、right、top、bottom */
			  background-position: 100% 100% ;
		}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis sequi necessitatibus praesentium quisquam hic quas ex maxime, accusamus deserunt doloribus, unde magnam reiciendis alias dolore ullam temporibus, exercitationem earum. Consequatur.
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam nobis itaque voluptatibus laudantium. Repellat tempora, quia dolor cupiditate temporibus a sit error ducimus quod incidunt! Ea esse error repudiandae doloremque?
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex sapiente ratione voluptas sint iusto voluptates, totam, illo excepturi vero officia culpa pariatur voluptatem debitis! Temporibus aperiam tempore et fugit corrupti?
		<!-- html img 图片  引入一张图片，位置不可随意改变 
		     css  背景图片  引入一张图片，位置可以随意改变
			 子属性   background-color  背景图片
			         background-image   背景图
					 background-repeat  背景重复
					 background-size    背景尺寸
					 background-attachment 背景附件
					 background-position 背景定位
			 复合属性 background: background-image  background-color   background-position 
			                     background-size   background-repeat和background-attachment
			简写属性：background:	background-image 	background-position/background-size  background-repeat	 
			代替子属性:background-image 、background-color、background-repeat
		-->
		<div></div>
		
	</body>
</html>